<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>21,事件1-上</title>
		<style type="text/css">
		.wrapper{
			width:300px;
			height:300px;
			background-color: red;
		}
		.content{
			width:200px;
			height:200px;
			background-color: green;
		}
		.box{
			width:100px;
			height:100px;
			background-color: orange;
		}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="content">
				<div class="box"></div>
			</div>
		</div>
		<script type="text/javascript">
		var wrapper=document.getElementsByClassName("wrapper")[0];
		var content=document.getElementsByClassName("content")[0];
		var box=document.getElementsByClassName("box")[0];
		
		wrapper.addEventListener("click",function(){
			console.log("wrapper");
		},false);
		content.addEventListener("click",function(e){
			console.log("content");
			e.cancelBubble=true;  /* 2.原来是IE独有*/
		},false);
		box.addEventListener("click",function(e){
			console.log("box");
			e.stopPropagation()/* 1.取消冒泡 （不支持IE9下）*/
		},false);
		/* -------封装取消冒泡 ------ */
			function stopBubble(event){
				if(event.stopPropagation){
					event.stopPropagation()
				}else{
					event.cancelBubble=true;
				}
			}
			/* 右键出菜单 */
			// document.oncontextmenu=function(){
			// 	console.log("a")
			// 	return false;
			// }
		</script>
	</body>
</html>
